<template>
  <!-- 屏幕宽度小于768px时，使用100%的宽度，大于768px时，使用90%的宽度 -->
  <div class="w-full md:w-[90%] mx-auto">
    <!-- 收藏应用 -->
    <h2 class="text-lg font-bold text-gray-800 mb-4">My Favorite</h2>
    <div v-if="loading" class="flex items-center justify-center h-[161px] pt-16 pb-16">
      <BaseLoading type="bars" />
    </div>
    <div v-else>
      <div v-if="favoriteList.length > 0" class="">
        <ClientOnly>
          <BusinessAppList :appList="processedFavoriteList" />
        </ClientOnly>
      </div>
      <div v-else class="flex flex-col items-center justify-center bg-[#FAFAFA] py-4">
        <img :src="plaIcon" class="w-1/4" loading="lazy">
        <div class="text-gray-500 text-sm">You don't save any AI Tool yet.</div>
        <div class="text-gray-500 text-sm">Here are some recommended AI tools for you!</div>
      </div>
    </div>
    <AdsGoogleAdCollect slot-type="favoritesDisplay1" />

    <!-- 推荐应用 -->
    <div class="bg-white">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Recommended For You</h2>
        <BusinessAppList :appList="processedAppList" />
      </div>
  </div>
</template>

<script setup>
import AppList from '@/assets/data/reconmmed.json'
import { replaceImageDomains } from '~/utils/configHelper'

const loading = ref(true)
const hostname = useHostname()
// 获取当前logo
const plaIcon = computed(() => {
  const theme = getThemeConfig(hostname)
  return theme?.pla_icon
})

// 处理后的应用列表，应用图片域名替换
const processedAppList = computed(() => {
  return replaceImageDomains(AppList, hostname)
})

// 处理后的收藏列表，应用图片域名替换
const processedFavoriteList = computed(() => {
  return replaceImageDomains(favoriteList.value, hostname)
})

const favoriteList = ref([])
const recommendedList = ref([])

onMounted(() => {
  logEvent('Favorite_Page_Show')
  initFavoriteList()
  initRecommendedList()
  loading.value = false
})


// 初始化收藏列表
const initFavoriteList = () => {
  try {
    const stored = window.localStorage.getItem('favoriteList')
    favoriteList.value = stored ? JSON.parse(stored) : []
  } catch (error) {
    console.error('初始化收藏列表失败:', error)
    favoriteList.value = []
  }
}

// 初始化推荐列表
const initRecommendedList = () => {
  // 这里可以添加获取推荐应用的逻辑
  // 暂时设置为空数组，你可以根据实际需求修改
  recommendedList.value = []
}
</script>

<style scoped>
  
</style>